<template>
  <div>
    <div
      class="body fade-show"
      v-if="!initLoading && ((isExtract && clerk !== null) || !isExtract)"
    >
      <div
        class="top-bg"
        :style="[
          `background:linear-gradient(to bottom,${DIYTHEME?.host_bg2},${DIYTHEME?.host_bg})`,
        ]"
      ></div>
      <template
        v-if="
          orderDetail.pay_status.value &&
          orderDetail.order_status.value != 2 &&
          !orderDetail.delivery_type.value &&
          !orderDetail.delivery_status.value &&
          isExtract
        "
      >
        <div class="order-text" :style="{ color: DIYTHEME?.host_color }">
          <div>核销</div>
        </div>
      </template>

      <div
        class="order-text"
        v-if="!isExtract"
        :style="{ color: DIYTHEME?.host_color }"
      >
        <div class="fz-large fw">{{ orderDetail.status_text }}</div>
        <template v-if="orderDetail.order_status.value">
          <template v-if="orderDetail.pay_status.value">
            <template v-if="orderDetail.order_status.value == 3">
              <image
                class="order-status-icon"
                :src="$utils.staticimg('fulfil.png')"
                mode="widthFix"
              ></image>
            </template>
            <template
              v-if="
                orderDetail.delivery_type.value &&
                orderDetail.order_status.value == 1
              "
            >
              <image
                class="order-status-icon"
                :src="$utils.staticimg('out-stock.png')"
                mode="widthFix"
              ></image>
            </template>
            <template
              v-if="
                !orderDetail.delivery_type.value &&
                orderDetail.order_status.value == 1
              "
            >
              <image
                class="order-status-icon"
                :src="$utils.staticimg('extract.png')"
                mode="widthFix"
              ></image>
            </template>
          </template>
          <template
            v-else-if="
              !orderDetail.pay_status.value && orderDetail.invalid_time > 0
            "
          >
            <div class="fz-small flex items-center">
              <div>订单在</div>
              <countdown
                :time="orderDetail.invalid_time"
                bcolor="transparent"
                :isColon="false"
                :hours="false"
                :colonSize="22"
                :size="20"
                color="#ffffff"
                colonColor="#ffffff"
              ></countdown>
              <div>后失效</div>
            </div>
          </template>
        </template>
      </div>
      <div style="height: 160rpx"></div>

      <div>
        <!-- 核销 -->
        <template v-if="!isExtract && orderDetail.order_status.value == 2">
          <template
            v-if="
              orderDetail.pay_status.value &&
              orderDetail.delivery_type.value == 'slef_mention' &&
              !orderDetail.delivery_status.value
            "
          >
            <div class="extract-main text-center">
              <div class="title">取货码</div>
              <div class="code">{{ orderDetail.extract_code }}</div>
              <template v-if="orderDetail.extract_qrcode">
                <image
                  :src="orderDetail.extract_qrcode"
                  mode="widthFix"
                ></image>
                <div class="desc">到店出示此码进行取货</div>
              </template>
            </div>
            <div class="extract-main mt10">
              <div class="flex">
                <div class="text-grey mr10">联系人姓名:</div>
                <div>{{ orderDetail.extract.linkname }}</div>
              </div>
              <div class="flex mt10">
                <div class="text-grey mr10">联系人电话:</div>
                <div>{{ orderDetail.extract.phone }}</div>
              </div>
            </div>
          </template>
        </template>

        <!-- 物流信息 -->
        <!-- 快递 -->
        <div
          class="delivery-box"
          v-if="orderDetail.delivery_type.value == 'express'"
        >
          <div class="icon icon-dingwei"></div>
          <div class="delivery-detail">
            <div class="delivery-name">
              <div>{{ orderDetail.address.name }}</div>
              <div class="ml5">{{ orderDetail.address.phone }}</div>
            </div>
            <div>
              {{ orderDetail.address.region.province
              }}{{ orderDetail.address.region.city
              }}{{ orderDetail.address.region.region
              }}{{ orderDetail.address.detail }}
            </div>
          </div>
        </div>

        <!-- 商品列表 -->
        <div class="goods-list">
          <template v-for="(item, index) in orderDetail.goods" :key="index">
            <div class="goods-item">
              <div class="flex between">
                <image
                  :src="item.goods_image"
                  class="goods-image"
                  mode="aspectFill"
                  @click="toGoodsDetail(item.goods_id)"
                ></image>
                <div class="goods-right">
                  <div class="goods-name" @click="toGoodsDetail(item.goods_id)">
                    {{ item.goods_name }}
                  </div>
                  <div class="text-grey fz-small mt5">
                    规格:{{ item.sku_attr_text }}
                  </div>
                  <div class="flex between mt5">
                    <money :value="item.price"></money>
                    <div>x{{ item.total_num }}</div>
                  </div>
                </div>
              </div>
              <div class="goods-bottom">
                <template v-if="item.refund_status.value">
                  <div class="text-grey">售后:</div>
                  <div class="ml5" :class="`text-${item.refund_status.color}`">{{item.refund_status.name}}</div>
                </template>
                <template
                  v-else-if="
                    orderDetail.order_status.value == 1 &&
                    orderDetail.is_allow_refund
                  "
                >
                  <hover>
                    <div class="refund-btn" @click="_onApplyRefund(item.id)">
                      申请售后
                    </div>
                  </hover>
                </template>
              </div>
            </div></template
          >
        </div>

        <!-- 订单信息 -->
        <div class="order-detail">
          <div class="item right">
            <div class="title">订单号码</div>
            <div class="desc">
              {{ orderDetail.order_no }}
              <div class="copy-btn" @click.stop="_onCory(orderDetail.order_no)">
                复制
              </div>
            </div>
          </div>
          <div class="item right">
            <div class="title">下单时间</div>
            <div class="desc">{{ orderDetail.create_time }}</div>
          </div>
          <template v-if="orderDetail.pay_status.value == 1">
            <div class="item right">
              <div class="title">支付方式</div>
              <div class="desc">{{ orderDetail.pay_type.name }}</div>
            </div>
            <div class="item right">
              <div class="title">支付时间</div>
              <div class="desc">{{ orderDetail.pay_time }}</div>
            </div>
            <div
              class="item right"
              v-if="orderDetail.pay_type.value == 'wechatpay'"
            >
              <div class="title">交易号</div>
              <div class="desc">{{ orderDetail.transaction_id }}</div>
            </div>
          </template>
          <div class="item right">
            <div class="title">配送方式</div>
            <div class="desc">{{ orderDetail.delivery_type.name }}</div>
          </div>
          <div
            class="item right"
            v-if="orderDetail.delivery_type.value == 'express'"
          >
            <div class="title">运费</div>
            <div class="desc">
              <div v-if="orderDetail.express_free">包邮</div>
              <money v-else :value="orderDetail.express_price"></money>
            </div>
          </div>
          <div class="item right">
            <div class="title">商品总额</div>
            <div class="desc">
              <money :value="orderDetail.order_total_price"></money>
            </div>
          </div>
          <div class="item right">
            <div class="title"></div>
            <div class="desc">
              <div>{{ orderDetail.pay_status.value ? "实付" : "合计" }}：</div>
              <money
                fw
                :value="
                  orderDetail.pay_status.value
                    ? orderDetail.pay_price
                    : orderDetail.order_total_price
                "
              ></money>
            </div>
          </div>
          <div
            class="item right"
            v-if="orderDetail.update_price.value != '0.00'"
          >
            <div class="title"></div>
            <div class="desc">
              <div>改价：</div>
              <div class="text-red">{{ orderDetail.update_price.symbol }}</div>
              <money :value="orderDetail.update_price.value"></money>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template v-if="!initLoading">
      <template
        v-if="
          !orderDetail.comment_status &&
          !isExtract &&
          orderDetail.order_status.value
        "
      >
        <!--  -->
        <div class="bottom-box" v-if="orderDetail.order_status.value != 3">
          <!-- 已支付取消订单 -->
          <template v-if="orderDetail.order_status.value != 3">
            <!-- 未支付取消订单 -->
            <template v-if="!orderDetail.pay_status.value">
              <div
                @click.stop="_cancelOrder(orderDetail.id)"
                class="apply-btn btn"
              >
                取消
              </div>
            </template>
            <template v-if="orderDetail.order_status.value != 4">
              <template
                v-if="
                  orderDetail.pay_status.value &&
                  orderDetail.order_status.value != 1
                "
              >
                <hover>
                  <div
                    class="apply-btn btn"
                    @click.stop="_cancelOrder(orderDetail.id)"
                  >
                    申请取消
                  </div>
                </hover>
              </template>
            </template>
            <template v-else>
              <div class="text-red">取消申请中</div>
            </template>
          </template>
          <!-- 查看物流 -->
          <template
            v-if="
              orderDetail.pay_status.value &&
              orderDetail.delivery_status.value &&
              orderDetail.delivery_type.value == 'express' &&
              !orderDetail.receipt_status.value
            "
          >
            <div
              @click.stop="_toExpress(orderDetail.id)"
              class="express-btn btn"
            >
              查看物流
            </div>
          </template>
          <!-- 确认收货 -->
          <template
            v-if="
              orderDetail.pay_status.value &&
              orderDetail.delivery_type.value == 'express' &&
              orderDetail.delivery_status.value &&
              !orderDetail.receipt_status.value
            "
          >
            <div @click.stop="_onReceipt(orderDetail.id)" class="fix-btn btn">
              确认收货
            </div>
          </template>
          <!-- 订单评价 -->
          <template
            v-if="
              orderDetail.order_status.value == 1 && !orderDetail.comment_status
            "
          >
            <div
              @click.stop="_onComment(orderDetail.id)"
              class="comment-btn btn"
            >
              评价
            </div>
          </template>
          <!-- 订单付款 -->
          <template
            v-if="
              !orderDetail.pay_status.value &&
              orderDetail.order_status.value == 2
            "
          >
            <div
              @click.stop="
                _onPay({
                  id: orderDetail.id,
                  index: 0,
                })
              "
              class="pay-btn btn"
            >
              付款
            </div>
          </template>
        </div>
      </template>
    </template>
    <init-load v-if="initLoading"></init-load>
    <payModal ref="payModalRef" @toPay="_toPay"></payModal>
  </div>
</template>
<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
import { getUserOrderDetail } from "@/api/user";
import { Result, ResultError } from "@/types";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
import payModal from "@/components/pay-modal/index.vue";
import orderCommon from "./common";

const { DIYTHEME } = storeToRefs(useConfig());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const orderId = ref<number>(0);

const orderDetail = ref<any>({});

const isExtract = ref<boolean>(false);

const clerk = ref<any>(null);

const toInit = () => {
  getUserOrderDetail({
    id: orderId.value,
  })
    .then((res: Result) => {
      orderDetail.value = res.data.order;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      initLoading.value = false;
      $utils.errorMsg(err);
    });
};

onLoad((options: any) => {
  orderId.value = options.order_id || 0;
});

onShow(() => {
  nextTick(() => {
    toInit();
  });
});

const {
  _cancelOrder,
  _toExpress,
  _onReceipt,
  _onComment,
  _onPay,
  _toPay,
  _onGoods,
  _onCory,
  _onApplyRefund,
} = orderCommon(toInit);

const toGoodsDetail = (id: number) => {
  $utils.routeRedirectTo("/pages/goods/detail", {
    id,
  });
};
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style scoped>
.body {
  padding-bottom: 150rpx;
}

.top-bg {
  height: 200rpx;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: -1;
}

.order-text {
  width: 90%;
  margin: 0 5%;
  position: fixed;
  height: 160rpx;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: -1;
}
.order-status-icon {
  width: 160rpx;
  margin-right: 50rpx;
}

.delivery-box {
  border-radius: var(--base-radius-large);
  background: #fff;
  padding: 30rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.delivery-box .icon {
  font-size: var(--base-size-large);
  margin-right: 15rpx;
}

.delivery-name {
  display: flex;
  justify-content: flex-start;
  font-weight: bold;
  line-height: 50rpx;
}

.goods-list {
  margin-top: 20rpx;
  background: #fff;
  padding: 50rpx 30rpx 20rpx;
}
.goods-item {
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #f9f9f9;
  padding: 20rpx 0;
}
.goods-item:last-child {
  border-bottom: 0;
}
.goods-image {
  height: 160rpx;
  width: 160rpx;
  border-radius: var(--base-radius-small);
}

.goods-right {
  width: calc(100% - 180rpx);
  position: relative;
}
.goods-bottom {
  display: flex;
  justify-content: flex-end;
}
.order-detail {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
}

.order-detail .item {
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  justify-content: first baseline;
}

.order-detail .item.right {
  display: flex;
  justify-content: space-between;
}

.order-detail .title {
  color: var(--base-grey);
}

.order-detail .desc {
  margin-left: 20rpx;
  display: flex;
  justify-content: flex-end;
}

.copy-btn {
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 10rpx;
  border-radius: var(--base-radius-small);
  font-size: var(--base-size-small-x);
  white-space: nowrap;
  background: #f0f0f0;
  margin: 15rpx 0 0 10rpx;
}

.bottom-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #fff;
  height: 120rpx;
  width: calc(100% - 40rpx);
  position: fixed;
  bottom: 0;
  padding: 0 20rpx;
  box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.05);
}

.bottom-box .btn {
  height: 60rpx;
  line-height: 60rpx;
  border-radius: var(--base-radius-default);
  padding: 0 30rpx;
  margin: 30rpx 0 20rpx 20rpx;
  white-space: nowrap;
}
.refund-btn {
  border-radius: var(--base-radius-default);
  font-size: var(--base-size-small);
  padding: 5rpx 10rpx;
  white-space: nowrap;
}

.pay-btn,
.comment-btn,
.fix-btn,
.refund-btn,
.express-btn,
.apply-btn {
  background: #f0f0f0;
}

/* 核销 */

.extract-main {
  width: calc(100% - 40rpx);
  background: #fff;
  border-top-right-radius: var(--base-radius-default);
  border-top-left-radius: var(--base-radius-default);
  padding: 20rpx;
}

.extract-main .title {
  line-height: 50rpx;
  font-weight: bold;
  height: 50rpx;
}

.extract-main .code {
  padding-left: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: var(--red);
  letter-spacing: 30rpx;
}

.extract-main image {
  margin: 0 auto;
  height: 200rpx;
  width: 200rpx;
}

.extract-main .desc {
  color: #999999;
}
</style>
	